<template>
	<view class="container">
		<page-nav class="custom-title" title="行业动态" :leftShow="false"> </page-nav>
		<view class="tab">
			<u-tabs :list="tabs" :is-scroll="false" :current="current"  active-color="#2979ff" inactive-color="#595959"
				height="100" @click="change"></u-tabs>
		</view>
		
		<swiper id="swiperBox" :style="{ height: swiperHeight + 'px' }" :current="current" @change="tabsChange">
			<swiper-item class="swiper-item" v-for="(pitem, pindex) in tabs" :key="pindex">
				<scroll-view scroll-y style="width: 100%;height: 100%;" refresher-enabled
					:refresher-triggered="pitem.triggered" @scrolltolower="onreachBottom"
					@refresherrefresh="refresherrefresh(pindex)" @refresherrestore="refresherrestore(pindex)"
					@refresherabort="refresherabort(pindex)">
					<view class="content">			 
						<view class="news-list">
						<navigator :url="`/pages/news/detail?id=${item.id}`" hover-class="none" class="news-item"
							v-for="(item, index) in  contentList[pindex].list" :key="index">
							<view class="left">
								<view class="info">
									{{item.title}}
								</view>
								<view class="date">
									<image src="/static/images/home/date.png" class="icon" mode=""></image>
									{{item.pubTime}}
								</view>
							</view>
							<image :src="item.coverPhoto!==''?item.coverPhoto:defaultImage" class="img" />
						</navigator>
							</view>
						<view class="nomore">
							<u-loadmore :status="contentList[pindex].status" />
						</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper> 
		<tab-bar></tab-bar>
	</view>
</template>

<script>
	import {
		dtzxtypelist
	} from '@/api/mock/home.js'
	export default {
		data() {
			return {
				swiperHeight: 0,
				tabs: [{
						name: '推荐',
						triggered:false,
						_triggered:false,						
					},	
					{
						name: '热门',
						triggered:false,
						_triggered:false,
					},
					{
						name: '行业动态',
						triggered:false,
						_triggered:false,
					},
					{
						name: '专精特新',
						triggered:false,
						_triggered:false,
					}
				],
				contentList: [{
						list: [],
						page: 1,
						pages: 1,
						infoType:1,
						status: 'loadmore'
					},
					{
						list:  [],
						page: 1,
						pages: 1,
						infoType:2,
						status: 'loadmore'
					},
					{
						list:  [],
						page: 1,
						pages: 1,
						infoType:3,
						status: 'loadmore'
					},
					{
						list: [],
						page: 1,
						pages: 1,
						infoType:4,
						status: 'loadmore'
					}
				], 
				current: 0,
				defaultImage: 'https://www.xrskfw.com/static/images/home/def.png' ,// 默认图片地址
				appcontain:{}
			};
		},
	 
		onLoad() {
			this.$u.vuex("tabbarIndex",1)
			const params = {
				infoType:this.contentList[this.current].infoType,
				current:1,
				size: 6
			}
			dtzxtypelist(params).then(data => {
				this.contentList[this.current].list = data.data.records;	
				this.contentList[this.current].pages = 	data.data.pages;					 
			}) 
		},
		onReady() {
			let that = this;
			uni.getSystemInfo({
				success(e) {
					console.log(e);
					let {
						windowWidth,
						windowHeight,
						safeArea
					} = e;
					const query = uni.createSelectorQuery().in(that);
					query
						.select('#swiperBox')
						.boundingClientRect(data => {
							that.swiperHeight = safeArea.bottom - data.top;
						})
						.exec();
				}
			});
		},
		onPullDownRefresh() {
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1500);
		},
		methods: {
			change(index) {
				this.current = index.index;
				refresherrefresh(index);
				
			},
			tabsChange(e) {
				this.current = e.detail.current;
				const params = {
									infoType:this.contentList[this.current].infoType,
									current:1,
									size: 6
				}
				console.log(	this.current,this.contentList[this.current].total )
				dtzxtypelist(params).then(data => {			 
									this.contentList[this.current].list = data.data.records;	
									this.contentList[this.current].total = 	data.data.total;		  
				}) 
			},
			refresherrefresh(index) {
				console.log('自定义下拉刷新被触发');
				let _this = this;
				if (_this.tabs[index]._triggered) {
					return;
				}
				_this.tabs[index]._triggered = true;
				//界面下拉触发，triggered可能不是true，要设为true
				if (!_this.tabs[index].triggered) {
					_this.tabs[index].triggered = true;
				}
				const params = {
					infoType:this.contentList[this.current].infoType,
					current:1,
					size: 6
				 }
				 
				 dtzxtypelist(params).then(data => {			 
					this.contentList[this.current].list = data.data.records;	
					this.contentList[this.current].pages = 	data.data.pages;		  
				 }) 
								  
				setTimeout(() => {
					_this.tabs[index].triggered = false; //触发onRestore，并关闭刷新图标
					_this.tabs[index]._triggered = false;														
				}, 10);

				setTimeout(() => {
					_this.tabs[index].triggered = false; //触发onRestore，并关闭刷新图标
					_this.tabs[index]._triggered = false;
				}, 10);
			},
			refresherrestore(index) {
				console.log('自定义下拉刷新被复位');
				let _this = this;
				_this.tabs[index].triggered = false;
				_this.tabs[index]._triggered = false;
			},
			refresherabort(index) {
				console.log('自定义下拉刷新被中止	');
				let _this = this;
				_this.tabs[index].triggered = false;
				_this.tabs[index]._triggered = false;
			},
			// scroll-view到底部加载更多
			onreachBottom() {
				let current = this.current;
				if (this.contentList[current].page >= 3) return;
				this.contentList[current].status = 'loading';
				
			 
				
				setTimeout(() => {
				/* 	this.contentList[current].page = ++this.contentList[current].page;
					this.contentList[current].list += 10;
					if (this.contentList[current].page >= 3)
						this.contentList[current].status = 'nomore';
					else this.contentList[current].status = 'loading'; */
					
					const params = {
						infoType:this.contentList[this.current].infoType,
						current:++this.contentList[this.current].page,
						size:3
					}
					console.log(this.contentList[this.current].page ,this.contentList[this.current].pages )
					
					if (this.contentList[this.current].page >= this.contentList[this.current].pages) 
						this.contentList[current].status = 'nomore';
					else
						this.contentList[current].status = 'loading';
					
					
					if (this.contentList[this.current].page >= this.contentList[this.current].pages) return;
					dtzxtypelist(params).then(data => {			  
						this.contentList[this.current].pages = 	data.data.pages;	
						const tmplist = this.contentList[this.current].list.concat(data.data.records) 
						this.contentList[this.current].list = tmplist;	
						console.log(this.contentList[this.current].list,data.data.records)																					
					}) 
														
				}, 2000);
			},
			 
		}
	};
</script>

<style lang="scss">
	.message-icon {
		width: 32rpx;
		height: auto;
		margin-right: 27rpx;
	}

	.tab {
		margin: 0 0 10rpx;
		border-bottom: 1px solid #e4e7ed;
	}

	.content {
		padding: 0 0 150rpx;
		padding-left:20rpx ;
		padding-right:20rpx;
		.news {
			&:not(:last-of-type) {
				border-bottom: 2rpx solid #e4e7ed;
			}
		}
	}

	.nomore {
		padding: 30rpx 20rpx;
	}

	.news {
		margin: 30rpx 30rpx 0;
		padding: 0 0 30rpx;

		.head {
			display: flex;

			.avatar {
				flex-shrink: 0;
				width: 69rpx;
				height: 69rpx;
				background: #ffffff;
				// border: 1px solid #14b9c8;
				border: 1px solid #5f88ff;
				border-radius: 50%;
			}

			.info {
				flex: 1;
				margin-left: 14rpx;

				.name {
					display: flex;
					align-items: center;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #000000;
					line-height: 36rpx;

					.tag {
						margin-left: 15rpx;
						display: inline-block;
						padding: 8rpx 10rpx;
						font-size: 14rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #69b0ff;
						line-height: 21rpx;
						border: 1px solid #69b0ff;
						border-radius: 6px;
					}
				}

				.date {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #a3a3a3;
					line-height: 36rpx;
				}
			}
		}

		.des {
			margin-top: 40rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			color: #000000;
			line-height: 47rpx;
		}
	}

	.swiper-box {
		height: 100vh;
	}
	.news-list {
		margin-top: 30rpx;

		.news-item {
			&:not(:last-of-type) {
				padding: 0 0 30rpx;
				margin-bottom: 30rpx;
				border-bottom: 1px solid #eeeeee;
			}

			display: flex;
			align-items: center;
			justify-content: space-between;

			.left {
				flex: 1;
				height: 160rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-around;

				.info {
					min-width: 0;
					padding-right: 10rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;

					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #212121;
					line-height: 36rpx;
				}

				.date {
					display: flex;
					align-items: center;

					.icon {
						width: 21rpx;
						height: 21rpx;
						margin-right: 9rpx;
					}

					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #a6abb5;
				}
			}

			.img {
				flex-shrink: 0;
				width: 252rpx;
				height: 160rpx;
				border-radius: 20rpx;
				background-color: #82848a;
			}
		}
	}
</style>